<template>
  <HeaderNav active-index="7"></HeaderNav>
  <TaskContainer>
    <div class="toolbar">
      <el-button type="primary" @click="AddModule">添加模块
        <template #icon>
          <el-icon>
            <CirclePlus/>
          </el-icon>
        </template>
      </el-button>
      <el-button type="danger" @click="batchRemoveModule">批量删除
        <template #icon>
          <el-icon>
            <Delete/>
          </el-icon>
        </template>
      </el-button>
    </div>
    <el-table :data="modulelist" style="width: 100%" border ref="ModuleTable">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="序号"/>
      <el-table-column prop="name" label="模块名"/>
      <el-table-column prop="stage.name" label="阶段名"/>
      <el-table-column label="录入时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon>
              <timer/>
            </el-icon>
            <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" prop="update_time"/>
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加分页插件 -->
    <div style="margin: 20px 0;">
      <el-pagination background layout="prev, pager, next"
                     hide-on-single-page
                     :page-size="pagination.rows"
                     :pager-count="11"
                     v-model:current-page="pagination.page"
                     :total="pagination.total"
                    @current-change="getModuleList"/>
    </div>
  </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"

export default {
  components: {
    HeaderNav,
    TaskContainer,
    Condition,
  },
  data() {
    return {
      pagination: {
        page: 1,
        rows: 20,
        total:0,
      },
      modulelist: [],
    }
  },
  created() {
    window.$bus.on('close-win-refresh', (index) => {
      // 关闭弹出的窗口
		  layer.close(index);
		  this.getModuleList()//查询所有模块11
    });
    this.getModuleList()
  },
  methods: {
    getModuleList(){
      //查询阶段列表
      this.$api.getModuleList(this.pagination).then(ret=>{
        this.modulelist=ret.results;
      this.pagination.total=ret.count;
      })
	},
    handleEdit(i, row){
        // console.log(row.id,"/////////11111111111111111111")
        //编辑模块
        this.$layer.open({
          type: 2,
          title: '编辑模块',
          shadeClose: true,
          shade: 0.5,
          area: ['650px', '360px'],
          btn: ['保存', '关闭'],
          content: '/module/update?id='+row.id + "&sid=" + row.stage.id + "&name=" + row.name,
          yes: (index, layero) => {
            // 获取 打开的 弹出层 窗口对象+
            let iframeWin = window[layero.find('iframe')[0]['name']];
            // 向 mitt 消息总线 发送 update-clazz 事件, 并传入 index 索引
            // 在 弹出的 clazz/update 页面中 监听 update-clazz、并完成 模块的修改功能
            iframeWin.$bus.emit('update-module', index);
          }
        })
    },
   AddModule(event) {
      this.$layer.open({
        type: 2,
        title: '添加模块',
        shadeClose: true,
        shade: 0.5,
        area: ['650px', '260px'],
        btn: ['保存', '关闭'],
        content: '/module/add',
        yes: (index, layero) => {
          // 获取打开的弹出层窗口对象
          let iframeWin = window[layero.find('iframe')[0]['name']];
          // 向 mitt 消息总线 发送 add-clazz 事件，并传入 index 索引l
          // 在 弹出的 Module/add 页面中 监听 add-Module、并完成 添加班级功能
          iframeWin.$bus.emit('add-module',index);
        }
      })
    },
    handleDelete(i,row){
      //删除班级
      let id =row.id
      this.$api.deleteModule(id).then(ret=>{
        console.log(ret)
        this.getModuleList()
        this.$layer.msg(ret.message)
        return ;
      })
    },
    batchRemoveModule(event) {
     //获取表格中选中的行
      let array = this.$refs.ModuleTable.getSelectionRows();
      //获取要删除的班级ID列表
      let ids = array.map(obj=>obj.id);
        console.log(ids);
        //调用批量删除的接口
      this.$api.batchRemoveModule(ids).then(ret=>{
        //如果成功删除,则刷新
        this.getModuleList()
      })
    }
  }
}
</script>

<style scoped>
.table-modules {
  padding: 10px 20px;
}

.table-modules span {
  padding: 2px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.toolbar {
  position: relative;
  right: 10px;
  z-index: 200;
  text-align: right;
  margin: 20px;
  flex: 1 1 auto;
}
</style>